<template>
  <div class="z_notice">
    <PageHeader @back="$router.go(-1)" subTitle="返回">消息通知</PageHeader>
    <div class="z_notices">
      <Title>消息通知</Title>
      <div style="height: 12px"></div>
      <a-select v-model="companyId" placeholder="选择用工单位" style="width: 200px" @change="selectChangge">
        <a-select-option v-for="item in hr.companyList" :key="item.id" :value="item.id" class="select-text">{{
          item.name
        }}</a-select-option>
      </a-select>
      <div style="height: 24px"></div>
      <a-tabs type="card" style="height: 100%" @change="tabChange" size="small" :tabBarGutter="10">
        <a-tab-pane :tab="item.name" v-for="(item, index) in TopData" :key="index">
          <a-layout class="mt24">
            <a-layout-sider :width="220" style="border-right: 1px solid #e8e8e8">
              <a-menu class="groupleft">
                <a-menu-item
                  v-for="item in topSubData"
                  :key="item.id"
                  style="border-bottom: 1px solid #e8e8e8; margin: 0 10px"
                  @click="changeStatus(item.id)"
                >
                  <a-row type="flex" align="middle">
                    <a-col class="groupname">{{ item.name }}({{ item.count || item.counts }})</a-col>
                  </a-row>
                </a-menu-item>
              </a-menu>
            </a-layout-sider>
            <a-layout>
              <div class="newslist">
                <div
                  style="
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    border-bottom: 1px solid #e8e8e8;
                    margin-top: 10px;
                    margin-left: 10px;
                  "
                >
                  <div class="footer-overlay">
                    <a-button type="link" style="color: #999999">{{ NoReadNum }}条消息未读</a-button>
                    <a-divider type="vertical" style />
                    <a-button type="link" @click="allReadSign">全部标为已读</a-button>
                  </div>
                  <div>
                    <div v-if="groupid !== 22" style="display: flex; align-items: center; flex-direction: row">
                      <xq-icon
                        type="icon-tishi"
                        class="primary_color"
                        style="width: 14px; height: 14px; margin-top: 4px; margin-left: 15px"
                      />
                      <div style="font-size: 12px; color: #767885; margin-top: 2px; margin-left: 5px; margin-right: 10px">
                        点击消息可直接跳转到相应页面处理
                      </div>
                    </div>
                  </div>
                </div>

                <div style="height: 62vh">
                  <a-empty v-show="noticelist.length === 0" style="margin-top: 80px" />

                  <li
                    v-show="noticelist.length > 0"
                    v-for="(item, index) in noticelist"
                    :key="index"
                    style="padding: 0 20px; cursor: pointer"
                    @click="read(item)"
                  >
                    <div class="new-top">
                      <div style="display: flex; flex-flow: row">
                        <div
                          v-if="item.readStatus"
                          class="bac-6D69F71A-radius-2px-gray font-6A66F6-10px-gray"
                          style="
                            min-width: 40px;
                            margin-right: 10px;
                            padding-left: 5px;
                            padding-right: 8px;
                            padding-top: 5px;
                            padding-bottom: 5px;
                          "
                        >
                          {{ item.title }}
                        </div>
                        <div
                          v-else
                          class="bac-6D69F71A-radius-2px font-6A66F6-10px"
                          style="
                            min-width: 40px;
                            margin-right: 10px;
                            padding-left: 5px;
                            padding-right: 8px;
                            padding-top: 5px;
                            padding-bottom: 5px;
                          "
                        >
                          {{ item.title }}
                        </div>
                        <span class="modalitys_title" :class="item.readStatus ? 'modalitys_active' : ''">{{ item.companyName }}</span>
                      </div>
                      <div>{{ item.gmtCreate ? formatDateAll(item.gmtCreate, "d") : "--" }}</div>
                    </div>
                    <div class="new-btm">
                      <div class="modalitys_title" :class="item.readStatus ? 'modalitys_active' : ''">{{ item.content }}</div>
                    </div>
                  </li>
                </div>
              </div>
              <!-- <a-pagination
                show-quick-jumper
                :current="pagination.current"
                :total="pagination.total"
                :page-size="pagination.pageSize"
                style="text-align: right;margin-top: 25px;"
                @change="onChange"
              ></a-pagination> -->
            </a-layout>
          </a-layout>
        </a-tab-pane>
        <a-tab-pane v-if="!isJF" key="10086" tab="备忘录">
          <Today :companyIdVal="companyId" :isModule="1"></Today>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import { readAllSysNotice, readAllNotice, loadNoReadNumber } from "./api.js";
import { listAllGroup, listAllNoticesAll, readItem } from "@/api/company/index";
import Today from "@/views/dashboard/today.vue";
const moduleType = process.env.VUE_APP_SUBJECT_TYPE || "subject";
export default {
  components: {
    Today
  },
  data() {
    return {
      groupid: "",
      TopData: [{ name: "消息提醒", id: "" }],
      topSubData: [],
      companyId: "",
      selectIndex: 0,
      NoReadNum: 0,
      noticelist: [],
      pageTitle: "消息通知",
      groupList: [
        { title: "消息通知", count: 0, type: "mail", id: 1 },
        { title: "电脑端通知", count: 0, type: "public", id: 2 }
      ],
      cardType: "mail",
      currentKey: 1,
      pagination: {
        pageSize: 10,
        total: 10,
        size: "default",
        current: 1,
        showTotal: (total) => `共 ${total} 条`,
        showQuickJumper: true
      }
    };
  },
  computed: {
    ...mapState(["hr"]),
    ...mapGetters(["isJF"])
  },
  created() {
    this.companyId = this.$store.state.hr.companyId;
    this.getListAllGroup();
  },
  methods: {
    async read(item) {
      const company = await this.$store.dispatch("hr/findCompanyItem", item.subjectId);
      const comyName = company ? company.name : null;
      // 保存用工单位信息
      this.$store.dispatch("onCompanyClick", {
        id: item.subjectId,
        name: comyName
      });
      if (!item.readStatus) {
        const h = [];
        h.push(item.id);
        readItem(h)
          .then((res) => {
            item.readStatus = true;
            this.getNumber();
            if (item.toUrl) {
              this.gotoUrlPath(item.toUrl);
            } else {
              if (item.subjectId === "defaultTransferAccounts") {
                this.gotoPath(item.subjectId, item.title);
              } else {
                this.gotoPath(item.noticeTypeCode);
              }
            }
            this.setNoReadCount();
          })
          .catch((err) => {
            console.log("debug log --> ", err);
          });
      } else {
        if (item.toUrl) {
          this.gotoUrlPath(item.toUrl);
        } else {
          if (item.subjectId === "defaultTransferAccounts") {
            this.gotoPath(item.subjectId, item.title);
          } else {
            this.gotoPath(item.noticeTypeCode);
          }
        }
      }
    },
    gotoUrlPath(url) {
      this.$router.push(url);
    },
    getType(type) {
      switch (type) {
        case "preTurnOfficial":
          return "人员待转正";
        case "preTransfer":
          return "人员待调岗";
        case "resign":
          return "人员离职";
        case "preResign":
          return "人员待离职";
        case "salaryCardChange":
          return "工资卡信息变更";
        case "induction":
          return "人员入职";
        case "preInduction":
          return "人员待入职";
        case "increment":
          return "增减员确认";
        case "approval":
          return "审批通知";
        case "contractExpires":
          return "合同到期";
        case "memoRemind":
          return "备忘提醒";
        case "retire":
          return "退休通知";
      }
    },
    selectChangge(companyId) {
      this.loadData();
      this.getNumber();
    },
    tabChange(index) {
      this.noticelist = [];
      if (index !== "10086") {
        if (this.groupid === "") {
          this.groupid = this.topSubData[0].id;
        }
        this.loadData();
        this.getNumber();
      } else {
        // this.groupid = "";
      }
    },
    gotoPath(type, title) {
      switch (type) {
        case "turnOfficial":
          // return "人员转正";
          this.$router.push({
            path: "/staff/manger", // 员工异动
            query: { selectId: "2" }
          });
          break;
        case "preTransfer":
          // return "人员调岗";
          this.$router.push({
            path: "/staff/manger", // 员工异动
            query: { selectId: "5" }
          });
          break;
        case "preResign":
          // return "人员离职";
          this.$router.push({
            path: "/staff/manger", // 员工异动
            query: { selectId: "3" }
          });
          break;
        case "resign":
          // return "人员离职";
          this.$router.push({
            path: "/staff/employee"
          });
          break;
        case "salaryCardChange":
          // return "工资卡信息变更";
          this.$router.push({
            path: "/staff/employee"
          });
          break;
        case "induction":
          // return "人员入职";
          this.$router.push({
            path: "/staff/employee"
          });
          break;
        case "preInduction":
          // return "人员入职";
          this.$router.push({
            path: "/staff/manger", // 员工异动
            query: { selectId: "1" }
          });
          break;
        case "increment":
          // return "增减员确认";
          this.$router.push({
            path: "/shebao/shebaoManage" // 员工异动
          });
          var that = this;
          setTimeout(function () {
            that.$router.push({
              path: "/shebao/shebaoManage/shebaoZengJianY"
            });
          }, 700);
          break;
        case "approval":
          // return "审批通知";

          this.$router.push({
            path: "/approval/list"
          });
          break;
        case "contractExpires":
          // return "合同到期";
          this.$router.push({
            path: "/contract/elecontract"
          });
          break;
        case "defaultTransferAccounts":
          // return "一键发薪审核";
          if (title === "审批抄送通知") {
            this.$router.push({
              path: "/paySalary/examine?changeKey=4"
            });
          } else {
            this.$router.push({
              path: "/paySalary/examine?changeKey=1"
            });
          }
          break;
        // case "memoRemind":
        //   return "备忘提醒";
      }
    },
    changeStatus(id) {
      this.noticelist = [];
      this.groupid = id;
      this.loadData();
      this.getNumber();
    },
    getListAllGroup() {
      listAllGroup({ companyId: this.companyId })
        .then((res) => {
          this.topSubData = [...res.data];

          if (this.groupid === "") {
            this.groupid = this.topSubData[0].id;
          }
          this.loadData();
          this.getNumber();
          this.setNoReadCount();
        })
        .catch((err) => {
          console.log("debug log --> ", err);
        });
    },
    getNumber() {
      loadNoReadNumber({
        moduleType: "hr",
        noticeGroupId: this.groupid,
        subjectId: this.companyId
      }).then((res) => {
        const data = res.data;
        const cardOptionTemp = [].concat(this.groupList);
        cardOptionTemp.map((item) => {
          switch (item.type) {
            case "mail":
              item.count = data["userNoticeNoReadNumber"];
              this.NoReadNum = item.count;
              break;
            case "public":
              item.count = data["userSysNoticeNoReadNumber"];
              break;
          }
        });
        this.groupList = cardOptionTemp;
      });
    },
    allReadSign() {
      this.$confirm({
        title: "确定全部设置为已读吗?",
        okType: "warning",
        onOk: () => {
          if (this.currentKey === 1) {
            readAllNotice({ moduleType, companyId: this.companyId })
              .then((res) => {
                this.$message.success("操作成功");
                this.loadData();
                this.getNumber();
              })
              .catch((err) => {
                console.log("debug log --> ", err);
              });
          } else {
            readAllSysNotice({ moduleType, companyId: this.companyId })
              .then((res) => {
                this.$message.success("操作成功");
                this.loadData();
                this.getNumber();
              })
              .catch((err) => {
                console.log("debug log --> ", err);
              });
          }
        }
      });
    },
    onChange(pageNumber) {
      this.pagination.current = pageNumber;
    },
    loadData() {
      if (this.groupid && this.companyId) {
        listAllNoticesAll({
          moduleType: "hr",
          noticeGroupId: this.groupid,
          companyId: this.companyId
        }).then((res) => {
          this.noticelist = res.data.userNoticeAllList || [];
          this.pagination.total = this.noticelist.length;
          this.pagination.current = 1;
        });
      }
    },

    goback() {
      this.$router.go(-1);
    },
    setNoReadCount() {
      listAllNoticesAll({
        moduleType: "hr",
        companyId: this.companyId
      }).then((res) => {
        for (var i = 0; i < this.topSubData.length; i++) {
          this.topSubData[i].count = 0;
        }

        for (var val in res.data.userNoticeAllMap) {
          for (i = 0; i < this.topSubData.length; i++) {
            if (this.getTypeParent(val) === this.topSubData[i].name) {
              for (var j = 0; j < res.data.userNoticeAllMap[val].length; j++) {
                if (res.data.userNoticeAllMap[val][j].readStatus === false) {
                  this.topSubData[i].count += 1;
                }
              }
            }
          }
        }
        this.topSubData = this.topSubData.map((i) => {
          i.counts = i.count;
          return i;
        });
      });
    },
    getTypeParent(type) {
      switch (type) {
        case "preTransfer":
        case "preTurnOfficial":
        case "preResign":
        case "salaryCardChange":
        case "preInduction":
          return "人事管理";

        case "increment":
          return "社保服务";

        case "approval":
          return "业务审批";
        case "contractExpires":
          return "合同管理";
        case "memoRemind":
          return "备忘提醒";
        case "retire":
          return "退休通知";
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.link-color {
  color: var(--primary);
}
.colorC0C0C0 {
  color: #c0c0c0;
}
.matter-title {
  padding: 0 24px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bag-primary {
  width: 4px;
  height: 20px;
  background: var(--primary);
  border-radius: 2px;
}
.pSlide-title {
  height: 48px;
  line-height: 48px;
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  color: #000000;
  padding: 0 24px;
  cursor: pointer;
}
.bac-6D69F71A-radius-2px {
  background: var(--primary10);
  border-radius: 2px;
}
.font-6A66F6-10px {
  font-size: 8px;
  font-weight: 500;
  color: var(--primary);
  line-height: 15px;
}
.z_notice {
  min-width: 1100px;
  .z_notices {
    width: 1100px;
    height: 100%;
    margin: 0 auto;
    padding: 24px;
  }
}
.font-6A66F6-10px-gray {
  font-size: 8px;
  font-weight: 500;
  color: #9fa2a8;
  line-height: 15px;
}
.bac-6D69F71A-radius-2px-gray {
  background: #9f9fa21e;
  border-radius: 3px;
}
.newslist {
  width: 100%;
  height: 100%;
  overflow: auto;
  li {
    width: 98%;
    min-height: 60px;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    border-radius: 4px;
    border-bottom: 1px solid #e8e8e8;
    .new-top {
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      div:nth-of-type(1) {
        span:nth-of-type(1) {
          font-size: 14px;
          color: rgba(37, 37, 37, 1);
          line-height: 20px;
        }
        span:nth-of-type(2) {
          width: 30px;
          height: 16px;
          border-radius: 4px;
          text-align: center;
          font-size: 10px;
          line-height: 16px;
          padding: 2px 4px;
        }
      }
      div:nth-of-type(2) {
        font-size: 14px;
        color: rgba(192, 192, 192, 1);
        line-height: 20px;
      }
    }
    .new-btm {
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      .contentline {
        width: 88%;
        color: rgba(192, 192, 192, 1);
        overflow: hidden;
        word-wrap: break-word;
      }
      .unfold {
        font-size: 14px;
        color: rgba(192, 192, 192, 1);
        line-height: 20px;
        cursor: pointer;
      }
    }
  }
}

.modalitys_title {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #55565d !important;
}
.modalitys_active {
  color: #a6a8b4 !important;
}
</style>
